<template>
  <div class="equ_box">
    <div class="equ_main">
      <div class="cardTitle flexBetween padding5-10 fontSize18 fontWeight">
        <div class="titleName">已调配资源-装备</div>
        <SelectOptions :value="sign1" :options="option" @change="select($event, 1)" />
      </div>
      <div class="textSJ flexBetween">
        <div class="lefttx">
          <ConeChart containerId="yjzyzb" :conedata="EquipmentData" v-if="isShowZYZB" @svgClick="svgClick1"></ConeChart>
        </div>
      </div>
    </div>
    <div class="materials_main">
      <div class="cardTitle flexBetween padding5-10 fontSize18 fontWeight">
        <div class="titleName">已调配资源-物资</div>
        <SelectOptions :value="sign2" :options="option" @change="select($event, 2)" />
      </div>
      <div class="textSJ flexBetween">
        <div class="lefttx">
          <ConeChart containerId="yjzywz" :conedata="MaterialsData" v-if="isShowZYWZ" @svgClick="svgClick2"></ConeChart>
        </div>
      </div>
    </div>
    <el-dialog title="资源台账-装备" :visible.sync="dialogZyclVisible1" width="70%">
      <el-table :data="tableData333" :header-cell-style="{
        background: '#B1C8F9',
        color: '#000',
      }" style="width: 100%" border height="600">
        <el-table-column type="index" width="50" align="center" label="序号" fixed></el-table-column>
        <el-table-column :prop="item.prop" align="center" :label="item.label" :width="item.width || '200'"
          v-for="(item, i) of zbColums" :key="i" show-overflow-tooltip :fixed="item.fixed">
        </el-table-column>
      </el-table>
    </el-dialog>

    <el-dialog title="资源台账-物资" :visible.sync="dialogZyclVisible2" width="70%">
      <el-table :data="tableData444" :header-cell-style="{
        background: '#B1C8F9',
        color: '#000',
      }" style="width: 100%" border height="600">
        <el-table-column type="index" width="50" align="center" label="序号" fixed></el-table-column>
        <el-table-column :prop="item.prop" align="center" :label="item.label" :width="item.width || '200'"
          v-for="(item, i) of wzColums" :key="i" show-overflow-tooltip :fixed="item.fixed">
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import ConeChart from "./ConeChart.vue";
import SelectOptions from "@/components/selectOptions.vue";
import { getResourceEquipmentData, getResourceMaterialsData, equipListPage, suppliesListPage } from "@/api/EmergencyResources/EmergencyResources.js";
import selectCity from "../mixin/selectCity";
import { zbColums, wzColums } from "@/views/SystemHomepage/HomePageContent/columns";
export default {
  components: { ConeChart, SelectOptions },
  mixins: [selectCity],
  data() {
    return {
      sign1: "",
      sign2: "",
      isShowZYZB: false,
      isShowZYWZ: false,
      EquipmentData: [], // 装备
      MaterialsData: [], // 物资
      tableData333: [],
      tableData444: [],
      unitId: JSON.parse(sessionStorage.getItem("org")).orgId,
      dialogZyclVisible1: false,
      dialogZyclVisible2: false,
      zbColums: zbColums,
      wzColums: wzColums
    };
  },
  created() {
    this.getEquipmentData();
    this.getMaterialsData();
  },
  methods: {
    select(val, num) {
      console.log(val, "---val");
      console.log(num, "---num");
      if (num === 1) {
        this.unitId = val;
        this.getEquipmentData(val);
      } else {
        this.unitId = val;
        this.getMaterialsData(val);
      }
    },
    getEquipmentData(id) {
      const keyObjs = {
        onArrival: "已到达",
        onDeploy: "已调配",
        onTheWay: "在途中"
      };
      const arr = [];
      getResourceEquipmentData({ orgId: id || this.personOrgId }).then(res => {
        for (const key in res) {
          if (key.startsWith("on")) {
            arr.push({
              label: keyObjs[key],
              value: res[key] || 0
            });
          }
        }
        arr.sort((a, b) => a.value - b.value);
        this.EquipmentData = arr;
        this.isShowZYZB = true;
      });
    },
    getMaterialsData(id) {
      const keyObjs = {
        onArrival: "已到达",
        onDeploy: "已调配",
        onTheWay: "在途中"
      };
      const arr = [];
      getResourceMaterialsData({ orgId: id || this.personOrgId }).then(res => {
        for (const key in res) {
          if (key.startsWith("on")) {
            arr.push({
              label: keyObjs[key],
              value: res[key] || 0
            });
          }
        }
        arr.sort((a, b) => a.value - b.value);
        this.MaterialsData = arr;
        this.isShowZYWZ = true;
      });
    },
    zbClick(i) {
      const params = {
        pageNum: 1,
        pageSize: 500
      };
      if (i === 1) {
        // params.unitId = JSON.parse(sessionStorage.getItem("org")).orgId;
        params.type = "sy";
        params.unitId = this.unitId;
        this.getEquipListPage(params);
      } else {
        params.occupation = i;
        params.unitId = this.unitId;
        this.getEquipListPage(params);
      }


    },
    wzClick(i) {
      const params = {
        pageNum: 1,
        pageSize: 500
      };
      if (i === 1) {
        // params.unitId = JSON.parse(sessionStorage.getItem("org")).orgId;
        params.type = "sy";
        params.unitId = this.unitId;
        this.getSuppliesListPage(params);
      } else {
        params.occupation = i;
        params.unitId = this.unitId;
        this.getSuppliesListPage(params);
      }
      // params.occupation = i;
      // params.unitId = JSON.parse(sessionStorage.getItem("org")).orgId;
      // this.getSuppliesListPage(params);
    },
    svgClick1(data) {
      console.log(data, "5555");
      if (data === undefined || data === null) {
        console.log(data);
      } else {
        let val = 0;
        if (data.label === "已到达") {
          val = 3;
        } else if (data.label === "已调配") {
          val = 1;
        } else if (data.label === "在途中") {
          val = 2;
        }
        this.zbClick(val);
      }

    },
    svgClick2(data) {
      console.log("///////////////////");
      if (data === undefined || data === null) {
        console.log(data);
      } else {
        let val = 0;
        if (data.label === "已到达") {
          val = 3;
        } else if (data.label === "已调配") {
          val = 1;
        } else if (data.label === "在途中") {
          val = 2;
        }
        this.wzClick(val);
      }
    },
    getSuppliesListPage(params) {
      suppliesListPage(params).then(res => {
        res.data.forEach(el => {
          if (el.occupation === 0) {
            el.ztmc = "待命";
          } else if (el.occupation === 1) {
            el.ztmc = "已调配";
          }
        });
        this.tableData444 = res.data;
        this.dialogZyclVisible2 = true;
      });
      // this.dialogZyclVisible2 = true;
    },
    getEquipListPage(params) {
      equipListPage(params).then(res => {
        res.data.forEach(el => {
          if (el.occupation === 0) {
            el.ztmc = "待命";
          } else if (el.occupation === 1) {
            el.ztmc = "已调配";
          }
        });
        this.tableData333 = res.data;
        this.dialogZyclVisible1 = true;
      });
    }
  }
};
</script>
<style lang='less' scoped>
//@import url(); 引入公共css类
:deep(.el-dialog__header) {
  background: #5077ff;

  .el-dialog__title {
    color: #fff;
  }

  .el-dialog__headerbtn {
    top: 5px;
    font-size: 30px !important;
  }

  .el-icon-close {
    color: #fff;
  }

  padding: 10px;
}

:deep(.el-dialog__body) {
  padding: 10px;
}

:deep(.el-table__fixed) {
  height: 580px !important;
}

.equ_box {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  .equ_main,
  .materials_main {
    width: 100%;
    height: 48%;
    border: 1px solid #0649d7;
    display: flex;
    flex-direction: column;

    .textSJ {
      flex: 1;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .leftNum {
      font-style: italic;
      font-size: 28px;
      padding: 6% 10%;
    }

    .lefttx {
      width: 100%;
      height: 100%;

      .parent {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;

        .ti.dtx {
          position: relative;
          width: 25%;
          height: 80%;
          margin-right: 10px;
          transform: rotate(180deg);
        }

        .ti.xtx {
          position: relative;
          width: 18%;
          height: 80%;
          margin-right: 10px;
          transform: rotate(180deg);

          &:before,
          &:after {
            background-color: #f59066;
            bottom: 36%;
          }
        }

        .ti.sjx {
          position: relative;
          width: 10%;
          height: 76%;
          margin-right: 10px;
          transform: rotate(180deg);

          &:before,
          &:after {
            background-color: #fddd67;
            bottom: 35%;
          }
        }

        .ti:before,
        .ti:after {
          position: absolute;
          content: "";
          width: 100%;
          height: 100%;
          bottom: 25%;
          background-color: #008dff;
          transform-origin: 0 0;
          -webkit-transform-origin: 0 0;
        }

        .ti:before {
          left: 0;
          transform: skew(-15deg);
          -webkit-transform: skew(15deg);
        }

        .ti:after {
          right: 0;
          transform: skew(15deg);
          -webkit-transform: skew(-15deg);
        }

        .ct {
          position: relative;
          text-align: center;
          bottom: 10%;
          left: -6%;
          z-index: 10;
          color: #fff;
          transform: rotate(180deg);
        }

        .pxsbx {
          width: 45%;
          height: 80%;
          transform: skewX(-20deg);

          .pxsbxDiv {
            >div {
              transform: skewX(20deg);
              height: 35px;
              line-height: 35px;
            }
          }
        }

        .pxsbx .one {
          position: relative;
          top: 5px;
          left: -5%;
        }

        .pxsbx .two {
          position: relative;
          top: 11px;
          left: -5.2%;
        }

        .pxsbx .three {
          position: relative;
          top: 17px;
          left: -5.4%;
        }
      }
    }
  }
}

.cardTitle {
  height: 20%;
}
</style>
